<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@  taglib  uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>


<html>

<head>
	
  <meta charset="utf-8" />
  <title>水果信息</title>
  <link rel="stylesheet" type="text/css" href="css/imgs.css"/>
  <link rel="stylesheet" type="text/css" href="css/main.css"/>
  <script type="text/javascript"  src="js/jq.js"></script>
  <script src="js/imgs.js" type="text/javascript" charset="utf-8"></script>
  
</head>
<script type="text/javascript">
	
	$(function(){
		$("#star").click(function(){
			//判断  当前   按钮 的  文字 是什么   关注  ？？    已关注 ？？？？
			
			var   btn_val =  $(this).val();
			if(btn_val=="已关注"){
				alert("当前商品您已经关注过！");
				return ; 
			}
			if(btn_val=="关注"){
				//1 把 div    变成  灰色  
				//2  star表  insert   
				var  scount = parseInt($("#scount").text())  ;
				var  fid  =  $("#fiddiv").text();
				//在ajax 中 不能使用 $(this)
				//用一个临时 变量 ele      等价  $(this)
				var  ele  =  $(this);	
				$.ajax({
					async: false,
					cache: false,
					url:"/fruits/star/AddStarServlet",
					//  fid   scount
					data:{'fid':fid,'scount':scount},
					type:'post',
					success: function(res){
						ele.css({'background-color':"#CCC",'border':'1px solid #FFF','color':"#FFF"});
						ele.val("已关注");
						/* //$(this).css({'background-color':'#CCC'});
						document.getElementById("star").style.color="#FFF";
						//$(this).val("已关注");
						document.getElementById("stardiv").style.border="1px solid #FFF";
						document.getElementById("star").style.border="1px solid #FFF"; */
					}
					
					
				});
			}
			
			
			
			
		});
		
	});

</script>

<body onload="show()">
<jsp:include page="head/head.jsp"></jsp:include>

<div class="fruit_info">
  <div class="img_box">
  	
    <div id="p0" class="show "><img src="img/fruits/${fruit.fid}/(1).jpg" /></div>
    <c:forEach  begin="1"   end="${fruit.fimgcount-1}"  var="i">
    	<div id="p${i}" class="non"><img src="img/fruits/${fruit.fid}/(${i+1}).jpg" /></div>
    </c:forEach>
	
	<!-- <div id="p2" class="non"><img src="img/fruits/1/(3).jpg" /></div> -->

	
    <div class="img_to">
      <ul >
      		<c:forEach   begin="1"  end="${fruit.fimgcount }"  var="i">
      			<li><img src="img/fruits/${fruit.fid }/(${i}).jpg" id="s${i-1}" onMouseMove="himg(this.id,${fruit.fimgcount})"/></li>
      		</c:forEach>
             
             <!-- <li><img src="img/fruits/1/(2).jpg" id="s1" onMouseMove="himg(this.id)"/></li>
             <li><img src="img/fruits/1/(3).jpg" id="s2" onMouseMove="himg(this.id)"/></li> -->

      </ul>
    </div>
  </div>

  <div class="fruit_text">
    <div class="fname">${fruit.fname }</div>
    <p>&nbsp;</p>
    <div class="spec"><input type="radio" checked="checked" name="fnum_radio" value="fnum_radio" />${fruit.fnorm }</div>
    <div class="up">￥${fruit.fprice }</div>
    <div class="fid"  >商品编号:<div  id="fiddiv">${fruit.fid }</div></div>

    <hr />
	<c:if test="${not  empty user }">
    <form  method="post" id="fform">
      <div class="fform">
        <div class="fform1">
	      <div class="Uaddress">配送至 :
	        <select name="address" id="sel">
	          <option value="上海">上海</option>
	          <option value="吉林">吉林</option>
	          <option value="山西">山西</option>
	          <option value="北京">北京</option>
	        </select>
	      </div>
      		<div class="Unum"><span id="numl" onclick="">-</span><span id="scount">1</span><span id="numr" onclick="">+</span></div>
      	</div>
          <div class="Uadd"><input type="button" name="add" id="cart" value="加入购物车" onclick="addCart(2,1)" /></div>
         
          	  <c:choose>
          	  	<c:when test="${isStar}">
          	  		<div class="starbutton" id="stardiv">
          	  			<input type="button" name="add" id="star" value="已关注" />
          	  		</div>
          	  	</c:when>
          	  	<c:otherwise>
          	  		<div class="starbutton"  style="background-color: #FFF;"  id="stardiv">
          	  			<input type="button" name="add" id="star" value="关注"/>
          	  		</div>  		
          	  	</c:otherwise>
          	  </c:choose>
          	  		
          	  
          			
          	  
          
          
          
      </div>
    </form>
	</c:if>
    <hr />
    <div class="finfo">
      <h3>商品简介</h3>
      <p id="finfo_text">${fruit.fsummary }</p>

    </div>
    <hr />
    <div class="fpro">
      <h3>温馨提示</h3>
      <p id="fpro_text">${fruit.fprompt }</p>

    </div>
    <hr />
  </div>

  <div class="fruit_hot" >
  <c:forEach  items="${hotinfo.list }"   var="hf">
  
    <div class="hf_title"><span class="ht_l">热卖商品</span><span class="ht_r"><a href="">MORE+</a></span></div>
     <div class="hot_fruit">
      <div class="hf_img"><a href="/fruits/fruit/GetFruitByFidServlet?fid=${hf.fid }"><img src="img/fruits/${hf.fid }/(1).jpg" /></a></div>
      <div c="hf_text">
        <div class="hf_name"><a href="/fruits/fruit/GetFruitByFidServlet?fid=${hf.fid}">${hf.fname }</a></div>
        <div class="hf_mon">现货：￥<span>${hf.fprice }</span></div>
      </div>
    </div>      
	</c:forEach>
  </div>
</div>

<jsp:include page="footer/footer.jsp"></jsp:include>
</body>
</html>
